<template>
  <div>
    <div style="display: flex;justify-content: center">
        <el-input v-model="keywords" placeholder="通过用户名搜索" prefix-icon="el-icon-search"
                  style="width: 400px;margin-right: 15px" @keydown.enter.native="doSearch"></el-input>
        <el-button icon="el-icon-search" type="primary" @click="doSearch">搜索</el-button>
    </div>
    <!-- 开遍开始部分 遍历卡片 -->
    <div class="hr-card-container">
      <el-card class="box-card" v-for="(hr,index) in hrs" :key="index" shadow="always">
        <div slot="header" class="clearfix">
          <span>{{ hr.name }}</span>
          <el-button style="float: right; padding: 3px 0;color: red" type="text" icon="el-icon-delete" >删除</el-button>
        </div>
        <div>
          <div class="img-container">
            <img :src="hr.userface" :alt="hr.name" :title="hr.name" class="userFace-img">
          </div>
          <!-- 用户数据开始部分 -->
          <div class="userInfo-container">
            <div> 用户名 :{{hr.name}} </div>
            <div> 电话号码 :{{hr.telephone}} </div>
            <div> 手机号码 :{{hr.phone}} </div>
            <div> 地址 :{{hr.address}} </div>
            <div> 用户状态:
              <el-switch
                v-model="hr.enabled"
                active-text="开启"
                inactive-text="关闭"
                @change="enabledChange(hr)">
              </el-switch>
            </div>
            <div>
              用户角色: <el-tag style="margin-right: 10px" v-for="(role,index) in hr.roles" :key="index" type="success">{{role.nameZh}}</el-tag>
                       <!--角色分配菜单-->
              <el-popover
                  placement="right"
                  title="角色列表"
                  width="200"
                  trigger="click"
                  @show="showRoles(hr)"
                  @hide="submit(hr)">
                <div>
                  <el-select v-loading="loading" multiple v-model="selectedRoles" placeholder="请选择角色">
                    <el-option
                        v-for="(item,index) in allRoles"
                        :key="index"
                        :label="item.nameZh"
                        :value="item.id">
                    </el-option>
                  </el-select>
                </div>
                <el-button slot="reference" icon="el-icon-more" size="mini" type="text"></el-button>
              </el-popover>

            </div>
            <div> 备注 :{{hr.remark}} </div>
          </div>
        </div>

      </el-card>
    </div>
  </div>

</template>

<script>
export default {
  name: "SysHr",
    data(){
      return {
        keywords: "",//搜索单词

        hrs:[],//hr对象

        allRoles:[],//所有的角色信息

        selectedRoles:[],//选中值

        loading: true,
      }
    },
  mounted() {
    this.initHrs();
  },
  methods:{
    /**
     *  提交角色信息变更
     * */
    submit(hr){
      /* 前端控制是否请求角色信息变更 */
      let roles = hr.roles;
      let flag = false;//设置标志
      if(roles.length != this.selectedRoles.length ){
          flag = true;
      } else {
        for (let i = 0; i < roles.length; i++) {
            let role = roles[i];
          for (let j = 0; j < this.selectedRoles.length; j++) {
            if(role != this.selectedRoles[i]){
                break;
            }
          }

        }
      }
      if(flag) {
        let url = '/system/hr/updateHrRoles?hrid=' + hr.id;
        //拼接字符串
        this.selectedRoles.forEach(role => {
          url += '&rid=' + role;
        })
        this.putRequest(url).then(resp => {
          if (resp) {
            this.initHrs();
          }
        })
      }
    },
    /**
     * 展示所有的角色信息
     * @Param hr 当前的hr对象
     * */
    showRoles(hr){
      //角色预选中的操作，把已经含有的角色信息放到value中区
      let roles = hr.roles;
      this.selectedRoles = [];
      //遍历当前的数组
        roles.forEach(role => {
          this.selectedRoles.push(role.id)
        })
        this.getAllRoles();
        this.loading = false;
    },

    /**
     * 所有角色信息
     *
     */
    getAllRoles(){
      this.getRequest("/system/hr/roles").then(resp => {
        if(resp){
          this.allRoles = resp;
        }
      })
    },
    /**
     * 搜索功能
     * */
    doSearch(){
      this.initHrs();
    },

    /**
     * 切换启用状态的方法
     * @param hr
     */
    enabledChange(hr){
      delete hr.roles;//删除roles中的属性
      this.putRequest("/system/hr/",hr).then(resp => {
        if(resp){
          this.initHrs()
        }
      })
    },

    /**
     * 初始化所有数据
     * */
    initHrs(){
      this.getRequest("/system/hr/?keywords="+this.keywords).then(resp => {
        if(resp){
          this.hrs = resp;
        }
      })
    }
  }
}
</script>

<style>
  .userInfo-container div{
    font-size: 17px;
    color: #409eff;
    margin: 3px;
  }
  .userInfo-container{
    margin-top: 30px;
  }
  .img-container{
    width: 100%;
    display: flex;
    justify-content: center;
  }
  .userFace-img{
    width: 72px;
    height: 72px;
    border-radius: 72px;
  }
  .hr-card-container{
    margin-top: 20px;
    display: flex;
    flex-wrap: wrap;
  }
  .box-card{
    width: 400px;
    margin-bottom: 30px;
    margin-left: 100px;
    box-shadow: red;
  }
</style>
